<template>
  <div>
    <el-card header="文件上传">
      <FileUpload v-bind="testApi" />
    </el-card>
    <el-card header="文件预览.docx">
      <vue-office-docx
        src="http://static.shanhuxueyuan.com/test6.docx"
        style="height: 400px; width: 100%"
      />
    </el-card>
    <el-card header="文件预览.Excel">
      <vue-office-excel
        src="http://static.shanhuxueyuan.com/demo/excel.xlsx"
        style="height: 400px; width: 100%"
      />
    </el-card>
    <el-card header="文件预览.pdf">
      <vue-office-pdf
        src="http://static.shanhuxueyuan.com/test.pdf"
        style="height: 400px; width: 100%"
      />
    </el-card>
  </div>
</template>

<script setup>
  //引入VueOfficeDocx组件
  import VueOfficeDocx from "@vue-office/docx";
  //引入相关样式
  import "@vue-office/docx/lib/index.css";

  //引入VueOfficeExcel组件
  import VueOfficeExcel from "@vue-office/excel";
  //引入相关样式
  import "@vue-office/excel/lib/index.css";

  //引入VueOfficePdf组件
  import VueOfficePdf from "@vue-office/pdf";

  import FileUpload from "./components/fileUpload.vue";

  const testApi = {
    tip: "只能上传图片格式",
    limit: 3,
    maxSize: 5,
    accept: "*",
  };
</script>

<style lang="scss" scoped></style>
